<template>

  <div>

    <v-card class="mx-auto">
      <v-container fluid>
        <v-row dense>
          <v-layout :class="{'form-header':isActive}">
            <div class="form-title">Travel allowance request form</div>
            <div class="form-btns">
              <v-btn :class="{'print-btn':isActive}"
                     depressed></v-btn>
              <v-btn :class="{'submit-btn':isActive}"
                     depressed
                     @click="Submit">Submit
              </v-btn>
              <v-btn depressed>Delete</v-btn>
            </div>
          </v-layout>
          <v-container class="grey lighten-5">
            <v-row justify="start">
              <v-col cols="12"
                     md="3"
                     sm="12"><label class="from-label">Request No:</label><span
                class="form-span">{{ travelAllowance.requestNo }}</span>
              </v-col>
              <v-col cols="12"
                     md="3"
                     sm="12"><label class="from-label">Request Status:</label><span
                class="form-span">{{ travelAllowance.expStatus }}</span>
              </v-col>
              <v-col cols="12"
                     md="3"
                     sm="12"><label class="from-label">Staff Name:</label><span
                class="form-span">{{ travelAllowance.claimantStaffName }}</span>
              </v-col>
              <v-col cols="12"
                     md="3"
                     sm="12"><label class="from-label">Staff ID:</label><span
                class="form-span">{{ travelAllowance.claimantStaffName }}</span>
              </v-col>
            </v-row>
            <v-row justify="start">
              <v-col cols="12"
                     md="3"
                     sm="12"><label class="from-label">Entity:</label><span
                class="form-span"> {{ travelAllowance.claimantEntityCode }}</span>
              </v-col>
              <v-col cols="12"
                     md="3"
                     sm="12"><label class="from-label">Grade:</label><span
                class="form-span">{{ travelAllowance.claimantStaffGrade }}</span>
              </v-col>
              <v-col cols="12"
                     md="3"
                     sm="12"><label class="from-label">Line of service:</label><span
                class="form-span">{{ travelAllowance.lineOfService }}</span>
              </v-col>
              <v-col cols="12"
                     md="3"
                     sm="12"><label class="from-label">Operating Unite:</label><span
                class="form-span">{{ travelAllowance.claimantOfficeCode }}</span>
              </v-col>
            </v-row>
            <v-row justify="start">
              <v-col cols="12"
                     md="3"
                     sm="12"><label class="from-label">Office City:</label><span
                class="form-span">{{ travelAllowance.claimantOfficeBuilding }}</span>
              </v-col>
              <v-col cols="12"
                     md="3"
                     sm="12"><label class="from-label">Local/Expatriate:</label><span
                class="form-span">{{ travelAllowance.localExpatriate == "N" ? "Local" : "Expatriate" }}</span>
              </v-col>
              <v-col cols="12"
                     md="3"
                     sm="12"><label class="from-label">Creation date (DD/MM/YYY):</label>
                <span class="form-span">{{ travelAllowance.creationDate | formattingDate }}</span>
              </v-col>
            </v-row>
            <v-row justify="start">
              <v-col cols="12"
                     md="3"
                     sm="12">
                <div style="display: flex">
                  <label class="from-label"

                         style="padding: 6px 0px;">Request Type:</label>
                  <v-select v-model="travelAllowance.requestType"
                            :items="requestType"
                            dense
                            item-text="Name"
                            item-value="Id"
                            outlined
                            @change="childPutTravelAllowanceFun"></v-select>
                </div>
              </v-col>
              <v-col cols="12"
                     md="6"
                     sm="12">
                <div style="display: flex">
                  <label class="from-label"
                         style="padding: 6px 0px;width: 16%">Client - job - office:</label>

                  <v-text-field
                    v-model="travelAllowance.jobProjectDesc"
                    dense
                    outlined
                    readonly
                    style="width: 84%"
                    @click="openClient"
                  ></v-text-field>

                </div>

              </v-col>
            </v-row>

          </v-container>
        </v-row>
      </v-container>
    </v-card>
    <v-card class="mx-auto">

      <v-container fluid>
        <v-row dense>
          <v-layout :class="{'form-tabs':isActive}">
            <v-tabs>
              <v-tab>Travel details</v-tab>
              <!--        <v-tab @click="attachmentTab">Attachment(s)</v-tab>-->
              <v-tab @click="historyTab">Audit history</v-tab>
              <v-tab>Approver(s)</v-tab>
              <v-tab-item>
                <traveldetails ref="details" :travelallowance="travelAllowance"
                               @update:travelallowance="travelAllowance = $event"></traveldetails>
                <attachment ref="attachmentView" :travelallowance="travelAllowance"></attachment>
              </v-tab-item>

              <v-tab-item>
                <ul class="history-content">
                  <li v-for="item in auditHistory" :key="item.logID">{{
                      item.actionTime + " " + item.actionContent
                    }}
                  </li>
                </ul>
              </v-tab-item>
              <v-tab-item>
                <table class="table form-table approver-table">
                  <thead>
                  <th><span>Name</span></th>
                  <th><span>Grade</span></th>
                  <th><span>Status</span></th>
                  </thead>
                  <tbody>
                  <tr>
                    <td></td>
                    <td></td>
                    <td>Approved at 2020-09-24 14:08:30</td>
                  </tr>
                  </tbody>
                </table>
              </v-tab-item>
            </v-tabs>

          </v-layout>
        </v-row>
      </v-container>
    </v-card>
    <v-dialog v-model="submitDialog"
              width="1200">
      <v-card>
        <v-card-title class="headline red darken-3">
          Select Approver
        </v-card-title>
        <v-row>
          <v-col>
          </v-col>
        </v-row>
        <v-card-text>
          <PeoplePickerOnDB :TravelAllowanceId="travelAllowanceId"
                            @eventPeoplePicker="eventPeoplePicker"></PeoplePickerOnDB>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary"
                 text
                 @click="submitConfirm">
            Confirm
          </v-btn>
          <v-btn color="primary"
                 text
                 @click="submitCancel">
            Cancel
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <client-picker ref="clientpicker"
                   :dialog="clientDialog"
                   :searchClient="searchClient"
                   @eventClentValue="eventClentValue"
                   @eventDialog="eventDialog"></client-picker>
    <loading :isLoading="isLoading"></loading>

  </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from "vue-property-decorator";
import {SearchClient, travelallowanceDetail, travelallowanceDetailSelect,} from "@/pagetypes";
import {attachment, details} from "@/components/travelallowance";
import {ClientPicker} from "@/components/ClientPicker";
import {PeoplePickerOnDB} from "@/components/PeoplePicker";
import {GetAuditHistory, GetJobPicker, GetTraveAllowanceDetail, PutTravelAllowance, WorkFlowHanld,WorkflowHandleOperation} from "@/request";
import {isEmpty} from "@/utils/util"
import {loading} from '@/components/loading'


@Component({
  components: {
    ClientPicker: ClientPicker,
    // traveldetails: traveldetails,
    PeoplePickerOnDB,
    traveldetails: details,
    attachment: attachment,
    loading
  },
})
export default class APP extends Vue {
  isLoading: boolean = false
  submitDialog: boolean = false;
  auditHistory: any = []
  attachmentList: any = [];
  searchClient: SearchClient = {};
  clientDialog: boolean = false;
  travelAllowance: travelallowanceDetail = {};
  isActive: boolean = true;
  requestType: travelallowanceDetailSelect[] = [];
  travelAllowanceId: string = "";

  // @Watch("travelAllowance.requestType")
  // onTravelAllowanceChangeValue(val: any, oldVal: string) {
  //   (this.$refs.details as any).PutTravelAllowanceFun(oldVal);
  // }

  @Watch("travelAllowance.jobProjectDesc")
  onAccordingClientChangeValue(val: any, oldVal: string) {
    this.childPutTravelAllowanceFun()
  }

  childPutTravelAllowanceFun() {
    (this.$refs.details as any).PutTravelAllowanceFun()
  }

  async created() {
    WorkflowHandleOperation(this.$route.params.id)
    this.isLoading = true
    this.requestType.push(
      {Id: "F", Name: "Firm"},
      {Id: "E", Name: "Client"}
    );
    this.travelAllowanceId = this.$route.params.id
    var res = await GetTraveAllowanceDetail(this.$route.params.id);
    if (res.data) {
      res.data.accordingCheckInDate = this.dayjs(res.data.checkInDate).format("DD/MM/YYYY") == "01/01/1901" ? "" : this.dayjs(res.data.checkInDate).format("DD/MM/YYYY")
      res.data.accordingCheckOutDate = this.dayjs(res.data.accordingCheckOutDate).format("DD/MM/YYYY") == "01/01/1901" ? "" : this.dayjs(res.data.accordingCheckOutDate).format("DD/MM/YYYY")
      res.data.checkInDate = this.dayjs(res.data.checkInDate).format("YYYY-MM-DD") == "1901-01-01" ? this.dayjs(Date.now()).format("YYYY-MM-DD") : this.dayjs(res.data.checkInDate).format("YYYY-MM-DD")
      res.data.checkOutDate = this.dayjs(res.data.checkOutDate).format("YYYY-MM-DD") == "1901-01-01" ? this.dayjs(Date.now()).format("YYYY-MM-DD") : this.dayjs(res.data.checkOutDate).format("YYYY-MM-DD")
      this.travelAllowance = res.data;
      (this.$refs.attachmentView as any).fileFiltrate(this.travelAllowance.uploadViewModels)
      this.isLoading = false;
    }
  }

  submitConfirm() {
    var data: any = {};
    data.id = this.$route.params.id
    data.operation = "Submit"
    WorkFlowHanld(data).then((res: any) => {
      console.log(res);
    })
    this.submitDialog = false;
  }

  submitCancel() {
    this.submitDialog = false;
  }

  eventPeoplePicker(payload: any) {
    console.log(payload);
  }

  Submit() {
    this.isLoading = true;
    if (!isEmpty(this.travelAllowance.territory)) {
      if (this.travelAllowance.territory == "Mainland China") {
        if (isEmpty(this.travelAllowance.province))
          return this.isLoading = false;
        if (isEmpty(this.travelAllowance.accomodationCity))
          return  this.isLoading = false;
      }
    } else
      return  this.isLoading = false;

    if (isEmpty(this.travelAllowance.hotelName))
      return  this.isLoading = false;
    if (isEmpty(this.travelAllowance.checkInDate))
      return  this.isLoading = false;
    if (isEmpty(this.travelAllowance.checkOutDate))
      return  this.isLoading = false;
    if (this.travelAllowance.uploadViewModels.length == 0) {
      this.$message.error("请检查每条记录是否有上传附件")
      return  this.isLoading = false;
    }
    if (this.travelAllowance.jobCode != "") {
      var jobModel: SearchClient = {};
      jobModel.JobCode = this.travelAllowance.jobCode
      jobModel.AssgnmtID = this.travelAllowance.assgnmtID == null ? 0 : this.travelAllowance.assgnmtID
      jobModel.ExpenseType = this.travelAllowance.requestType;
      jobModel.OUCode = this.travelAllowance.claimantOfficeCode;
      jobModel.CountryCode = this.travelAllowance.countryCode;
      jobModel.ClientCode = this.travelAllowance.clientCode
      jobModel.EntityGroupCode = this.travelAllowance.entityGroupCode;
      GetJobPicker(jobModel).then((res: any) => {
        console.log(res);
        if (res.data) {
          console.log(res.data)
          var staffList = [];
          res.data.forEach((x: any) => {
            this.travelAllowance.mic = x.asgMgrStaffCode
            this.travelAllowance.pic = x.asgPtrStaffCode
            PutTravelAllowance(this.travelAllowance).then((r: any) => {
              this.submitDialog = true;
              this.isLoading = false
            });
          })
        }
      })
    }


  }


  openClient() {
    this.searchClient.CountryCode = this.travelAllowance.countryCode;
    this.searchClient.EntityGroupCode = this.travelAllowance.entityGroupCode;
    this.searchClient.ExpenseType = this.travelAllowance.requestType;
    this.searchClient.OUCode = this.travelAllowance.claimantOfficeCode;
    this.searchClient.ClientCode = this.travelAllowance.clientCode
    this.searchClient.JobCode = this.travelAllowance.jobCode
    this.searchClient.AssgnmtID = this.travelAllowance.assgnmtID == null ? 0 : this.travelAllowance.assgnmtID
    this.searchClient.AssgProjectID = this.travelAllowance.assgnmtProjectID == null ? 0 : this.travelAllowance.assgnmtProjectID
    this.searchClient.Keyword = "N"
    this.clientDialog = true;
    this.$refs.clientpicker.SearchDefult(this.searchClient)
  }

  eventTravelallowance(payload
                         :
                         any
  ) {
    this.travelAllowance = payload;
  }


  eventClentValue(payload
                    :
                    any
  ) {
    let jobProjectDesc = "";
    this.travelAllowance.clientCode = payload.clientModel.clientCode;
    this.travelAllowance.clientName = payload.clientModel.clientName;
    jobProjectDesc = payload.clientModel.clientName
    if (payload.jobModel != undefined) {
      this.travelAllowance.jobCode = payload.jobModel.jobCode;
      this.travelAllowance.assgnmtID = Number(payload.jobModel.assgnmtID);

      this.searchClient.AssgnmtID = Number(payload.jobModel.assgnmtID);
      jobProjectDesc += " - " + payload.jobModel.jobCode;

    }
    if (payload.projectModel != undefined) {
      this.searchClient.AssgProjectID = Number(payload.projectModel.assgProjectID)
      this.travelAllowance.projectCode = payload.projectModel.projectCode;
      this.travelAllowance.assgnmtProjectID = Number(payload.projectModel.assgProjectID);

      jobProjectDesc += " - " + payload.projectModel.projectCode;
    }
    this.travelAllowance.jobProjectDesc = jobProjectDesc
    this.clientDialog = false;
    //

  }


  eventDialog() {
    this.clientDialog = false;
  }

  historyTab() {
    GetAuditHistory(this.$route.params.id).then((res: any) => {
      if (res.data) {
        res.data.forEach((x: any) => x.actionTime = this.dayjs(x.actionTime).format("DD/MM/YYYY HH:mm:ss"))
      }
      this.auditHistory = res.data;
    })
  }

}
</script>
<style scoped>
</style>
